<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<style>
	.category-arrow-text{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 13px;
		font-weight: normal;
		color: #000000;
		text-decoration: none;
		margin:0px;
		background-position: left 3px;
	<s:if test="#attr.categoryOptions.useHomepageCategoryFolders == 1">
		background-image: url(images/left/<s:property value="#attr.categoryOptions.defaultHomepageCategoryFoldersImageFile" />);
	</s:if>
		background-repeat: no-repeat;
		padding-left: 13px;
	}
	.category-arrow-text:hover{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 13px;
		font-weight: normal;
		color: #c1009a;
		text-decoration: none;
		margin:0px;
		background-position: left 3px;
	<s:if test="#attr.categoryOptions.useHomepageCategoryFolders == 1">
		background-image: url(images/left/<s:property value="#attr.categoryOptions.defaultHomepageCategoryFoldersImageFile" />);
	</s:if>
		background-repeat: no-repeat;
		padding-left: 13px;
	}
</style>

<div style="margin:0px 0px 16px 0px">
	<div style="margin:0px 0px 0px 0px"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  		<tr>
    		<td width="9" class="grey-header-bg-left">&nbsp;</td>
    		<td align="left" class="grey-header-bg"><div class="white-header-text">Categories</div></td>
    		<td width="9" class="grey-header-bg-right"></td>
  		</tr>
	</table>
</div>
<div style="margin:0px 5px 0px 5px">
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
    	<tr>
        	<td rowspan="2" valign="top"><div style="margin:10px 0px 0px 0px">
            	<s:set name="totalCat" value="#attr.listGeneralCategories.size" var="totalCat" />
            	<s:set var="cols" value="#attr.categoryOptions.nonHomepageCategoryColumns" ></s:set>
            	<s:iterator status="rowStatus" value="listGeneralCategories" var="generalCategories">
          		<s:if test="#rowStatus.index % #cols == 0 || #cols == 1">
          			<table width="100%"><tr>
				</s:if>
	            		<td width="<s:property value="100 / #cols" />%">
	            			<div>
	            				<a href="subCategories.htm?cid=<s:property value="%{#generalCategories.categoryId}" />" class="category-arrow-text" >
		                      <s:if test="#attr.categoryOptions.mainCategoryCount == 1">
		                      	<s:if test="%{#attr.text !=null && (#attr.text=='rtl' || #attr.text=='RTL')}">
									(<s:property value="%{#rowStatus.index}" />)
	    						</s:if>
	    					  </s:if>
	    						<s:property value="%{#generalCategories.categoryName}" />
	    					  <s:if test="#attr.categoryOptions.mainCategoryCount == 1">
		                        <s:if test="%{#attr.text ==null || (#attr.text!='rtl' && #attr.text!='RTL')}">
							    (<s:property value="%{#rowStatus.index}" />)
							    </s:if>
		                      </s:if></a>
	            			</div>
	            			<s:if test="#attr.categoryOptions.mainCategoryAltTranslation == 1">
	                      	<% if(session.getAttribute("WW_TRANS_I18N_LOCALE") != null && !session.getAttribute("WW_TRANS_I18N_LOCALE").toString().equals("en")) { %>
							<div class="common-text11" style="margin: 2px 0px 2px 0px;">
								(<s:text name="category.%{#generalCategories.categoryId}" />)
							</div>
							<% } %>
	                      	</s:if>
	            		 </td>
	            	<s:if test="#cols > 1"><td><div style="margin-left: <s:if test="#rowStatus.count % #cols != 0"><s:property value="#attr.categoryOptions.categoriesHorizontalSpacing" />px</s:if><s:else>0px</s:else>">&nbsp;</div></td></s:if>
	                <s:if test="#rowStatus.count % #cols == 0 || #rowStatus.last || #cols == 1">
	                	</tr></table>
	                	<s:if test="%{#rowStatus.index != #totalCat - 1}">
	                      <div class="categories-separator-bg" style="margin:7px 0px 7px 0px"><img src="images/framework/blank.gif" alt=" " /></div>
	                    </s:if>
	                </s:if>

                </s:iterator>
                </div>
			</td>
            <td width="11" valign="top" class="left-bg"><div style="margin:0px 0px 0px 0px"><img src="images/left/left-grey-top-bg.jpg" alt=" " width="11" height="170" /></div></td>
		</tr>
		<tr>
        	<td valign="bottom" class="left-bg"><div style="margin:0px 0px 0px 0px"><img src="images/left/left-grey-bottom-bg.jpg" alt=" " width="11" height="121" /></div></td>
		</tr>
	</table>
</div>
              </div>